<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            display: flex;
            /* gap: 20px; */
            /* padding: 20px; */
        }

        .column {
            width: 200px;
            padding: 10px;
            max-height: 400px;
            overflow-y: auto;
        }

        .item {
            padding: 8px;
            margin: 4px 0;
            cursor: pointer;
            border-radius: 4px;
            transition: all 0.2s;
        }

        /* .item:hover {
            background: #f0f0f0;
        } */

        .selected {
            background: #bc9159;
            color: white;
        }

        .checkbox-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .action-bar {
            margin-top: 20px;
            display: flex;
            gap: 12px;
        }

        button {
            padding: 8px 20px;
            border-radius: 4px;
            cursor: pointer;
        }

        .column_province {
            flex: 2;
            background-color: #f0f0f0;
            color: #000;
            font-weight: bold;
        }

        .column_city {
            flex: 2;
            background-color: #f7f7f7;
        }

        .column_area {
            flex: 3;
            background-color: #ffffff;
        }

        .reset {
            border: 1px solid #ccc;
            text-align: center;
            height: 48px;
            line-height: 48px;
            flex: 1;
            border-radius: 22px;
        }

        .complete {
            flex: 1;
            height: 48px;
            line-height: 48px;
            background-color: #bc9159;
            color: #fff;
            text-align: center;
            border-radius: 22px;

        }

        input[type=checkbox] {
            width: 16px;
            height: 16px;

            position: relative;
        }

        input[type=checkbox]::after {
            position: absolute;
            top: 0;
            color: #000;
            width: 16px;
            height: 16px;
            display: inline-block;
            visibility: visible;
            padding-left: 0px;
            text-align: center;
            content: ' ';
        }

        input[type=checkbox]:checked::after {
            content: "✓";
            color: #fff;
            font-size: 10px;
            line-height: 15px;
            background-color: #bc9159;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container">
            <!-- 省份列 -->
            <div class="column column_province">
                <div v-for="province in regionData" :key="province.name" class="item"
                    :class="{ selected: selected.province === province.name }" @click="selectProvince(province)">
                    {{ province.name }}
                </div>
            </div>

            <!-- 城市列 -->
            <div class="column  column_city">
                <div v-for="city in currentCities" :key="city.name" class="item"
                    :class="{ selected: selected.city === city.name }" @click="selectCity(city)">
                    {{ city.name }}
                </div>
            </div>

            <!-- 区县列 -->
            <div class="column  column_area">
                <div class="checkbox-item">
                    <input type="checkbox" id="select-all" v-model="selectAll" @change="toggleAllDistricts">
                    <label for="select-all">全部</label>
                </div>
                <div v-for="district in currentDistricts" :key="district" class="checkbox-item">
                    <input type="checkbox" :value="district" v-model="selected.districts"
                        @change="handleDistrictChange">
                    <label>{{ district }}</label>
                </div>
            </div>
        </div>

        <div class="action-bar">
            <div @click="resetAll" class="reset">重置</div>
            <div @click="confirmSelection" class="complete">完成</div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

    <script>
        new Vue({
            el: '#app',
            data: {
                regionData: [
                    {
                        name: '四川省',
                        cities: [
                            {
                                name: '成都市',
                                districts: [ '锦江区', '青羊区', '成华区', '武侯区', '金牛区', '高新区', '天府新区', '双流区']
                            },
                            {
                                name: '绵阳市',
                                districts: ['涪城区', '游仙区', '安州区', '三台县']
                            }
                        ]
                    },
                    {
                        name: '黑龙江省',
                        cities: [
                            {
                                name: '哈尔滨市',
                                districts: ['道里区', '南岗区', '道外区', '平房区']
                            }
                        ]
                    }
                ],
                selected: {
                    province: null,
                    city: null,
                    districts: []
                },
                currentCities: [],
                currentDistricts: [],
                selectAll: false
            },
            mounted() {
                // 初始化时选择第一个省份
                if (this.regionData.length > 0) {
                    const firstProvince = this.regionData[0];
                    this.selectProvince(firstProvince); // 触发省份选择逻辑
                }
            },
            computed: {
                filteredDistricts() {
                    return this.currentDistricts.filter(d => d !== '全部')
                }
            },
            watch: {
                'selected.districts'(newVal) {
                    this.selectAll = newVal.length === this.filteredDistricts.length
                }
            },
            methods: {
                selectProvince(province) {
                    this.selected.province = province.name;
                    this.currentCities = province.cities;

                    // 默认选择第一个城市
                    if (province.cities.length > 0) {
                        const firstCity = province.cities[0];
                        this.selected.city = firstCity.name;
                        this.currentDistricts = firstCity.districts;
                    } else {
                        this.selected.city = null;
                        this.currentDistricts = [];
                    }

                    this.selected.districts = [];
                },
                selectCity(city) {
                    this.selected.city = city.name
                    this.currentDistricts = city.districts
                    this.selected.districts = []
                },
                toggleAllDistricts() {
                    if (this.selectAll) {
                        this.selected.districts = [...this.filteredDistricts]
                    } else {
                        this.selected.districts = []
                    }
                },
                handleDistrictChange() {
                    if (this.selected.districts.includes('全部')) {
                        const index = this.selected.districts.indexOf('全部')
                        this.selected.districts.splice(index, 1)
                    }
                },
                resetAll() {
                    this.selected = {
                        province: null,
                        city: null,
                        districts: []
                    }
                    this.currentCities = []
                    this.currentDistricts = []
                    this.selectAll = false
                },
                confirmSelection() {
                    console.log('当前选择:', this.selected.districts)
                    alert(`已选择：${this.selected.districts.join(', ') || '无'}`)
                }
            }

        })
    </script>
</body>

</html>